<!DOCTYPE html>
<html lang="en">
<head>
    <title>首页</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=mze9fX79gwVgUItHuzF0QMC6tEfKTwHq"></script>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<div id="container"></div>

<script type="text/javascript">
    var map = new BMapGL.Map("container");
    // 创建地图实例
    //var point = new BMapGL.Point(120.819738,31.274602);
    var point = new BMapGL.Point(120.635342,31.242423);
    var point_caixiang = new BMapGL.Point(120.600744,31.308057);
    var point_shangfangshan = new BMapGL.Point(120.594377,31.259274);
    var point_zhagangchang = new BMapGL.Point(120.76109,31.073441);
    var point_cailian  = new BMapGL.Point(120.638791,31.40798);
    var point_hongzhuang = new BMapGL.Point(120.635342,31.242423);
    var point_muduzhongxue = new BMapGL.Point(120.457206,31.285355);
    // 创建点坐标
    var station = ["彩香幼儿园","上方山","北库轧钢厂","采莲商业广场","红庄","木渎中学"];
    var station_point=[point_caixiang,point_shangfangshan,point_zhagangchang,point_cailian,point_hongzhuang,point_muduzhongxue];
    var x = 0;
    for(let i=station.length-1;i>=0;i--){
        (function (x) {
        var marker = new BMapGL.Marker(station_point[i]);
        var opts = {
            width: 30,
            height: 10,
            title: i+1+"号监测点"
        };

        var jump = "<a href=ob"+(i+1)+">详细信息</a>"
        var infoWindow = new BMapGL.InfoWindow(station[i]+"空气质量AQI"+"<br/>&emsp;&emsp;&emsp;&emsp;&emsp;"+jump, opts);
        map.openInfoWindow(infoWindow, station_point[i]);
        marker.addEventListener("click", function (e) {
             marker.openInfoWindow(infoWindow,opts); //开启信息窗口
        });
        map.addOverlay(marker);}(x))
    }
    map.centerAndZoom(point, 12);
    map.enableScrollWheelZoom();
</script>
</body>
</html>


